import React from 'react'
import Config from './../Config'
export class Tab extends React.Component {
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

export class Tabs extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0
        }
    }
    getTitleItemCssClasses(index) {
        return index === this.state.currentIndex ? style.navActive : style.nav;
    }

    getContentItemCssClasses(index) {
        return index === this.state.currentIndex ? style.contentActive : style.contentItem;
    }
    render() {
        return (
            <div style={{overflow:'hidden'}}>
                <nav style={style.navBorder}>
                    {this.props.children.map((item, index) => {
                        return (<div 
                          style={this.getTitleItemCssClasses(index)}
                          key={index}
                          onClick={() => { this.setState({ currentIndex: index }) }}
                          >
                          {item.props.title} 
                        </div>)
                    })}
                </nav>
                <div>
                    {this.props.children.map((item, index) => {
                        return (<div key={index} style={this.getContentItemCssClasses(index)} >{item}</div>)
                    })}
                </div>
            </div>

        )
    }
}
const style={
  navBorder:{ border: `1px solid ${Config.BaseColor}`, margin: '0.5rem 2.85714rem'},
  nav:{ display: 'table-cell', verticalAlign: "middle", width: '1%', textAlign: 'center', fontSize: '1rem', height: "2.14285rem"},
  navActive:{ display: 'table-cell', verticalAlign: "middle", width: '1%', textAlign: 'center', fontSize: '1rem', height: "2.14285rem", background: Config.BaseColor,color: '#fff'},
  titleActive:{ background: Config.BaseColor,color: '#fff'},
  contentItem:{display:'none'},
  contentActive:{display:'block'}
}